<template>
  <div class="note-list">
    <div class="lookme" v-if="userId">
      <i class="el-icon-refresh" @click="getList"> 刷新列表</i>
      <el-switch v-model="isMain" @change="handleSeeMe"> </el-switch>
      <span>只看我的</span>
    </div>
    <el-empty v-show="!tableData.length" description="暂无数据"></el-empty>
    <div class="note-item" v-for="item in tableData" :key="item.id">
      <div class="note-user">
        <el-avatar size="medium" :src="headImg(item.sysUser)"></el-avatar>
        {{ item.sysUser.userName }}
      </div>
      <div class="note-content">
        <p>{{ item.contents }}</p>
      </div>
      <div class="note-info">
        <el-row :gutter="20">
          <el-col :span="12" class="note-info-left">
            <span>{{ item.createTime }}</span>
          </el-col>
          <el-col :span="12" class="note-btns">
            <span
              :class="[
                'el-icon-thumb',
                { active: item.likeUserList.includes(userId) },
              ]"
              @click="handleLike(item)"
            >
              {{ item.likeNum }}</span
            >
            <span
              :class="[
                'el-icon-attract',
                { disabled: item.createBy == userId },
                { active: item.quoteUserList.includes(userId) },
              ]"
              @click="handleQuote(item)"
            >
              {{ item.quoteUserList.includes(userId) ? '已引用' : '引用' }}
            </span>
          </el-col>
        </el-row>
      </div>
    </div>
    <Pagination
      v-show="parseInt(pageObj.count) > 0"
      :total="parseInt(pageObj.count)"
      @change="getList"
      :page.sync="listQuery.page"
      :limit.sync="listQuery.limit"
    />
  </div>
</template>
<script>
import {
  sysCourseNotesClickQuote,
  sysCourseNotesClickUnQuote,
  sysCourseNotesClickLike,
  sysCourseNotesClickUnLike,
} from '@/api/admin/course/sysCourseNotes.js'
import setInfo from '@/mixins/setInfo'
export default {
  mixins: [setInfo],
  data() {
    return {
      isMain: false,
      userId: this.$store.getters.userId,
      listQuery: {
        courseId: '',
        page: 1,
        limit: 10,
        isOpen: '1',
        resId: '',
        resType: '1',
        createBy: '',
      },
      tableData: [],
      pageObj: {},
    }
  },
  watch: {
    $route: {
      immediate: true,
      handler() {
        this.getList()
      },
    },
  },
  mounted() {},
  methods: {
    async getList() {
      let { id, cId } = this.$route.query
      this.listQuery.courseId = id
      this.listQuery.resId = cId
      let dispatchType = this.userId
        ? 'querySysCourseNotes'
        : 'queryOpenApiSysCourseNotes'
      let res = await this.$store.dispatch(dispatchType, this.listQuery)
      this.tableData = res.data
      this.pageObj = res
    },
    handleSeeMe() {
      this.listQuery.createBy = this.isMain ? this.userId : ''
      this.getList()
    },
    //点赞
    handleLike(item) {
      //判断是否登录
      if (!this.$store.getters.userId) {
        this.loginTip()
        return
      }
      let flag = item.likeUserList.includes(this.userId)
      if (flag) {
        sysCourseNotesClickUnLike(item.id).then((res) => {
          this.getList()
        })
      } else {
        sysCourseNotesClickLike(item.id).then((res) => {
          this.getList()
        })
      }
    },
    //引用
    handleQuote(item) {
      //判断是否登录
      if (!this.$store.getters.userId) {
        this.loginTip()
        return
      }
      if (item.createBy == this.userId) return
      let flag = item.quoteUserList.includes(this.userId)
      if (flag) {
        sysCourseNotesClickUnQuote(item.id).then((res) => {
          this.getList()
        })
      } else {
        sysCourseNotesClickQuote(item.id).then((res) => {
          this.getList()
        })
      }
    },
  },
}
</script>
<style scoped lang="scss">
.note-list {
  .lookme {
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;
    i {
      margin-right: 20px;
      cursor: pointer;
    }
    span {
      margin-left: 10px;
    }
  }
  .note-item {
    padding: 10px 0;
    border-bottom: 1px dashed #eee;
    .note-user {
      font-size: 14px;
      color: #666;
      height: 36px;
      line-height: 36px;
      span {
        float: left;
        margin-right: 10px;
      }
    }
    .note-content {
      color: #333;
      padding: 10px 0;
      line-height: 22px;
      text-align: justify;
    }
    .note-info {
      .note-info-left {
        span {
          color: #9199a1;
          margin-right: 10px;
        }
      }
      .note-btns {
        text-align: right;
        span {
          color: #717a84;
          margin-left: 10px;
          cursor: pointer;
          &:hover {
            color: #444;
          }
          &.active {
            color: #fb3;
          }
          &.disabled {
            cursor: not-allowed;
          }
        }
      }
    }
  }
}
</style>